<template>
  <div class="buyersAddress">
    <!--  顶部导航  -->
    <HeaderSimple
      page="buyersAddress"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <div class="section">

      <div class="address_title">
        <span>收货地址</span>
      </div>

      <van-address-edit
        :address-info="addressInfo"
        :area-list="areaList"
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>
</template>

<script>
import HeaderSimple from "@/components/HeaderSimple";
import { AddressEdit } from 'vant';
export default {
  name: "buyersAddress",
  components: {
    HeaderSimple
  },
  data() {
    return {
      title: "",
      addressInfo: {
        name: '邓波',
      },
      areaList:{},
      searchResult: []
    };
  },
  created() {
    this.title = this.$route.meta.title;
  },
  methods: {
    onSave(content) {
      Toast('save');
      console.log(content)
    },
    // 详细地址模模糊查找
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '',
          address: ''
        }];
      } else {
        this.searchResult = [];
      }
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.buyersAddress {
  .section {
    .address_title {
      height: 127px;
      padding: 47px 30px;
      span {
        font-size:34px;
        font-family:SourceHanSansCN;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
    }
    @{deep} .van-address-edit {
      .van-cell {
        font-size: 13px;
        font-family:SourceHanSansCN;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
    }
    @{deep} .van-address-edit__buttons {
      margin-top: 60px;
      .van-button--danger {
        background:linear-gradient(360deg,#FF3B3E,#FF7F3F);
        border-radius:9px;
        font-size:16px;
        font-family:SourceHanSansCN;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
    }
  }
}
</style>
